<div class="tabBackground"
  [style.backgroundColor]="settings.config.design.background"
  [style.backgroundImage]="'url('+ shared.bg +')'"
  [style.filter]="getBrightness()"
  [style.backgroundSize]="getBgSize()"
  [style.backgroundBlendMode]="getBgBlend()"
  [style.backgroundRepeat]="settings.config.design.imageSize === 10 ? 'repeat' : 'no-repeat'"></div>
<section
  class="w100"
  [style.fontFamily]="shared.getFont(settings.config.design.font, settings.config.design.customFont)"
  [style.fontWeight]="shared.getFontWeight(settings.config.design.font, settings.config.design.customFontWeight)"
  [style.fontSize]="shared.getFontSize(settings.config.design.scaling)"
  >

  <tab-bookmarks></tab-bookmarks>

  <div class="tabCenter">
    <tab-time
      *ngFor="let clock of settings.config.time.clocks; let i = index;"
      [index]="i"
      [clock]="clock"
      [style.fontSize]="shared.getFontSize(clock.scaling, 1.7)"
      [style.width]="getClockSpan(clock.span)"
      [style.order]="shared.getOrder(clock.id)"
      [style.transform]="shared.getOffset(clock.offset)">
    </tab-time>
    <tab-date
      class="w100"
      *ngIf="settings.config.date.enabled"
      [style.order]="shared.getOrder(settings.config.date.id)"
      [style.transform]="shared.getOffsetLarge(settings.config.date.offset)"></tab-date>
    <tab-message
      class="w100"
      *ngIf="settings.config.message.enabled"
      [style.order]="shared.getOrder(settings.config.message.id)"
      [style.transform]="shared.getOffsetLarge(settings.config.message.offset)"
      [style.fontSize]="shared.getFontSize(settings.config.message.scaling, 3)"></tab-message>
    <tab-search
      class="w100"
      *ngIf="settings.config.search.enabled"
      [style.order]="shared.getOrder(settings.config.search.id)"
      [style.transform]="shared.getOffsetLarge(settings.config.search.offset)"
      [style.fontSize]="shared.getFontSize(settings.config.search.scaling, 3)"></tab-search>
  </div>

</section>

<!-- Options toggle / nav -->
<app-settings-toggle></app-settings-toggle>
